<!--
 * @Author: yangmy
 * @Date: 2022-03-16 17:26:35
 * @FileDescription:地图
-->
<template>
  <div class="map">
    <p class="label">{{ goods.goodsName }}</p>
    <div class="label-title">{{ adNames }}</div>
    <charts :params="params"></charts>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, watch } from 'vue'
import httpRequest from '@/service'
import { gradientColor } from '@/charts/utils'
export default defineComponent({
  name: 'cMap',
  props: {
    goods: {
      type: Object,
      default: () => {
        return {}
      }
    },
    adNames: {
      type: String,
      default: ''
    },
    adCodes: {
      type: String,
      default: ''
    }
  },
  components: {},
  setup(props, { emit }) {
    let adcode = ref('650000')
    let adName = ref('新疆')
    // 地图
    const mapState: any = reactive({
      params: {
        loading: true,
        chartInstance: null,
        forceRedraw: true,
        map: {
          value: '数量'
        },
        adcode: '650000',
        options: {
          dataset: {
            dimensions: [],
            source: []
          },
          dataZoom: {
            disabled: true
          },
          xAxis: {
            disabled: true
          },
          yAxis: {
            disabled: true
          },
          visualMap: [
            {
              type: 'piecewise',
              pieces: [],
              show: true,
              right: 20,
              precision: 1,
              bottom: 50,
              align: 'left',
              orient: 'vertical',
              itemWidth: 30,
              itemHeight: 15,
              showLabel: true,
              itemGap: 5,
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            }
          ],
          legend: {
            show: false
          },
          tooltip: {
            show: true,
            axisPointer: {
              type: 'shadow',
              snap: true
            },
            confine: true,
            backgroundColor: '#1959a7',
            borderColor: '#4beeff',
            borderWidth: 1,
            padding: 12,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            trigger: 'item',
            formatter: (params: any) => {
              if (params.data) {
                let listTemp = ''
                for (let item of params.data.list) {
                  if (item.name === '本期价格') {
                    listTemp += `<li style="line-height:26px;display: block;">
                          <span style="display: inline-block;width: 50%;text-align:left;font-size:16px;color:#e8effb;">${item.name} :</span>
                          <span style="display: inline-block;width: 50%;text-align:right;font-size:16px;font-family: 'AliHYAiHei';color: rgb(174, 212, 255);">${item.value}</span>
                        </li>`
                  } else {
                    listTemp += `<li style="line-height:26px;display: block;">
                          <span style="display: inline-block;width: 50%;text-align:left;font-size:16px;color:#e8effb;">${
                            item.name
                          } :</span>
                          <span style="display: inline-block;width: 50%;text-align:right;font-size:16px;font-family: 'AliHYAiHei';color:#00ffea;">${
                            item.value
                          }${item.name.indexOf('环比') > -1 ? '%' : ''}</span>
                        </li>`
                  }
                }
                return `
                    <div style="width:200px;">
                      <div style="display: flex;justify-content: space-between;">
                        <p style="color: #ffc77a;font-size:22px;line-height:40px;font-family: 'AliHYAiHei'">${params.name}</p>
                        <p style="color: #00ffea;font-size:16px;line-height:40px;font-family: 'SourceHanSansCN'">${params.data.unit}</p>
                      </div>
                      <ul>${listTemp}</ul>
                    </div>`
              }
            }
          },
          geo: [
            {
              map: '650000',
              roam: false,
              top: '3%',
              left: '5%',
              right: '5%',
              bottom: '10%',
              aspectScale: 0.95,
              zoom: 1,
              scaleLimit: 2,
              label: {
                show: true,
                color: '#fff',
                fontSize: 13,
                fontFamily: 'AliHYAiHei',
                formatter: (params: any) => {
                  let result = ''
                  let itemdata = mapState.params.options.series[0].data.filter(
                    (item: any) => {
                      return item.name === params.name
                    }
                  )[0]
                  const value = itemdata?.value || ''
                  result = `{name|${params.name}}\n{value|${
                    value === 0 ? '' : value
                  }}`
                  return result
                },
                rich: {
                  name: {
                    fontSize: 18,
                    lineHeight: 24,
                    fontWeight: 'normal',
                    fontFamily: 'AliHYAiHei',
                    textShadowColor: 'rgba(0,0,0,.5)',
                    textShadowBlur: 10,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 5
                  },
                  value: {
                    fontSize: 16,
                    lineHeight: 24,
                    fontWeight: 'normal',
                    fontFamily: 'AliHYAiHei',
                    color: '#ffc22f',
                    textShadowColor: 'rgba(0,0,0,.5)',
                    textShadowBlur: 5,
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0
                  }
                }
              },
              itemStyle: {
                areaColor: '#17adbc',
                borderColor: '#fff',
                borderWidth: 2,
                shadowColor: 'rgba(0,0,0,0.6)',
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5
              },
              emphasis: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 18,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 20,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              },
              select: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 18,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 20,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              },
              z: 3
            }
          ],
          series: [
            {
              type: 'map',
              map: '650000',
              geoIndex: 0,
              aspectScale: 0.85,
              data: [],
              select: {
                itemStyle: {
                  areaColor: gradientColor(['#efde1f', '#ea690a']),
                  borderColor: 'rgba(255,255,255,0.8)',
                  borderWidth: 1
                },
                label: {
                  color: '#fff',
                  rich: {
                    name: {
                      fontSize: 18,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      textShadowColor: 'rgba(0,0,0,.5)',
                      textShadowBlur: 10,
                      textShadowOffsetX: 0,
                      textShadowOffsetY: 5
                    },
                    value: {
                      fontSize: 20,
                      lineHeight: 24,
                      fontWeight: 'normal',
                      fontFamily: 'AliHYAiHei',
                      color: '#fff'
                    }
                  }
                }
              }
            },
            {
              type: 'map',
              map: '650000',
              aspectScale: 0.85,
              top: '5%',
              left: '7%',
              right: '3%',
              bottom: '8%',
              silent: true,
              itemStyle: {
                areaColor: '#064c8c',
                borderColor: 'rgba(255,255,255,0.5)',
                borderWidth: 1,
                shadowColor: 'rgba(0,0,0,1)',
                shadowBlur: 20,
                shadowOffsetX: 5,
                shadowOffsetY: 5
              }
            }
          ]
        },
        event: {
          click: (params: any) => {
            // 清除默认选中
            mapState.params.options.series[0].data.forEach((item: any) => {
              if (props.adCodes === item.adcode) {
                mapState.params.chartInstance.dispatchAction({
                  type: 'unselect',
                  seriesIndex: 0,
                  name: item.name
                })
              }
            })

            adcode.value =
              adcode.value === params.data.adcode
                ? '650000'
                : params.data.adcode
            adName.value =
              adName.value === params.data.name ? '新疆' : params.data.name

            emit('change', adcode.value, adName.value)
          },
          customEvent: (chartInstance: any) => {
            // 保存下echarts实例
            mapState.params.chartInstance = chartInstance
            setTimeout(() => {
              // 添加默认选中
              mapState.params.options.series[0].data.forEach((item: any) => {
                if (props.adCodes === item.adcode) {
                  mapState.params.chartInstance.dispatchAction({
                    type: 'select',
                    seriesIndex: 0,
                    name: item.name
                  })
                }
              })
            }, 0)
          }
        },
        custom: true
      },
      getData: (val: any) => {
        mapState.params.loading = true
        httpRequest
          .get({ url: 'M3P2map', params: { goodsCode: val.goodsId } })
          .then((res) => {
            if (res.code === 200) {
              //               [
              //   {
              //     "color": "#18bed8",
              //     "max": 2.19,
              //     "min": 0
              //   },
              //   {
              //     "color": "#0d92ff",
              //     "max": 2.55,
              //     "min": 2.19
              //   },
              //   {
              //     "color": "#0c64ff",
              //     "max": 3.14,
              //     "min": 2.55
              //   },
              //   {
              //     "color": "#496ed2",
              //     "min": 3.14
              //   }
              // ]
              if (res.pieces.length === 1 && !res.pieces[0].max) {
                const pie = { ...res.pieces[0], max: '10' }
                mapState.params.options.visualMap[0].pieces = [pie]
              } else {
                mapState.params.options.visualMap[0].pieces = res.pieces
              }
              mapState.params.options.series[0].data = res.data
            } else {
              mapState.params.options.visualMap[0].pieces = [
                { color: '#18bed8', max: 10, min: 0 }
              ]
              mapState.params.options.series[0].data =
                mapState.params.options.series[0].data.map((i: any) => {
                  i.value = 0
                  return i
                })
            }
            mapState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    watch(
      () => props.goods,
      (newVal) => {
        mapState.getData(newVal)
      },
      {
        deep: true
      }
    )
    return {
      ...toRefs(mapState)
    }
  }
})
</script>
<style lang="less" scoped>
.map {
  position: relative;
  height: 105%;
  top: 2px;
  .label {
    position: absolute;
    top: 33px;
    width: 195px;
    left: -10px;
    padding: 0 30px;
    text-align: center;
    font-size: 20px;
    font-family: 'Microsoft YaHei';
    color: rgb(255, 234, 0);
    font-weight: bold;
  }
  .label-title {
    position: absolute;
    top: 33px;
    right: 45px;
    width: 44px;
    z-index: 99;
    padding: 30px 0;
    font-size: 26px;
    font-weight: 700;
    color: #ffc924;
    background-color: rgba(0, 71, 157, 0.8);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s;
  }
}
</style>
